<template>
  <div class="xtx-hot">
    <div class="container">
      <Panel title="人气推荐" sub-title="人气爆款 不容错过">
        <template #panel-content>
          <div ref="target" style="position: relative; height: 406px">
            <transition name="fade">
              <ul class="xtx-hotlist" v-if="result?.length">
                <li
                  class="xtx-hotlist__item"
                  v-for="hot in result"
                  :key="hot.id"
                >
                  <router-link to="#">
                    <img :src="hot.picture" alt="" />
                    <p class="title">{{ hot.title }}</p>
                    <p class="alt">{{ hot.alt }}</p>
                  </router-link>
                </li>
              </ul>
              <ListSkeleton v-else />
            </transition>
          </div>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup lang="ts">
import ListSkeleton from './ListSkeleton.vue'
import { hotListAPI } from '@/api/home'
import Panel from './Panel.vue'
import { useLazyData } from '@/hooks/useLazyData'
import type { Hot } from '@/api/home/types.d'

defineOptions({
  name: 'Hot'
})

/** 懒加载获取数据 */
const { target, result } = useLazyData<Hot>(hotListAPI)
</script>

<style lang="scss" scoped>
.xtx-hot {
  &list {
    display: flex;
    justify-content: space-between;

    &__item {
      width: 306px;
      height: 406px;
      background-color: $basic-white;
      transition:
        transform 0.5s,
        box-shadow 0.5s;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      }

      img {
        width: 306px;
        height: 306px;
      }

      p {
        overflow: hidden;
        padding: 12px 30px 0;
        font-size: 22px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.alt {
          color: #999;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
